<!DOCTYPE html>
<html style="height:100vh;" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width = device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>皮肤AI数据中心</title>
	<link rel="icon" href="../img/ico.png" />
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/index.css">
	  <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E8YuPS04zrgGjT4QTFMBpGtmwUsvpLKf"></script> -->
</head>
<body style="height: 100%; margin: 0;font-family: '微软雅黑';">
	<!-- 顶部部分内容 -->
	<!-- 大标题部分 -->
<header>
    <div class="bigData-title chinese-title">
        <p >More Me 皮测运营中心</p>
        <!-- <canvas id="myCanvas" width="280" height="40"></canvas> -->
    </div>
	<!-- 左边logo内容 -->
    <div class="left-company-logo">
        <img src="../img/logo.png" alt="">
		<!-- <img src="images/djm.png" alt=""> -->
        <span>深圳蛋壳物联信息科技有限公司</span>
    </div>
	<!-- 右边时间部分 -->
    <div class="right-currentTime-logOut">
		<span class="year fontDigi"></span>
		<span class="separator">年</span>
		<span class="month fontDigi"></span>
		<span class="separator ">月</span>
		<span class="day fontDigi"></span>
		<span class="separator ">日</span> 
		<span class="currentDay-week"></span>
		<span class="hour fontDigi"></span> 
		<span class="separator" style="color:#0ABDFF">:</span>
		<span class="minute fontDigi"></span>
		<span class="separator" style="color:#0ABDFF">:</span>
		<span class="second fontDigi"></span>
		<span class="logout cursor logout-chinese"></span>
    </div>
</header>
	<!-- 顶部部分内容结束 -->
	
<!-- 中间部分内容开始 -->
<section>
	<!-- 设备运行右边部分 -->
	<div id="device-left">
		<ul>
			<li>
				<span><img src="../img/Catintelligence.png"/></span>
				<span id="number" style="font-family: DIGI;" class="moreme"></span>
				<span style="font-family:'微软雅黑';">猫咪智能设备</span>
			</li>
			<li>
				<span><img src="../img/Mêtis.png"/></span>
				<span id="number" style="font-family: DIGI;" class="metis"></span>
				<span id="Mêtis">Mêtis专业版设备</span>
			</li>
		</ul>
	</div>
	<!-- 设备运行中间时间内容部分 -->
	<div id="device-middle">
		<ul>
			<li>
				<p>全球地区分布</p>
				<p style="font-family: DIGI;" class="firstnum"></p>
			</li>
			<li>
				<p>今日设备在线统计</p>
				<p style="font-family: DIGI;" class="secondnum"></p>
			</li>
			<li>
				<p>今日档案统计</p>
				<p style="font-family: DIGI;" class="lastnum"></p>
			</li>
		</ul>
	</div>
	
	<!-- 右边中英文设备 -->
	<div id="device-right">
		<ul>
			<li>
				<span><img src="../img/ChineseVersion.png"/></span>
				<span id="number" style="font-family: DIGI;" class="chinese"></span>
				<span class="device-right-size">中文版设备</span>
			</li>
			<li>
				<span><img src="../img/english.png"/></span>
				<span id="number" style="font-family: DIGI;" class="english"></span>
				<span class="device-right-size">英文版设备</span>
			</li>
		</ul>
	</div>

</section>
<!-- 中间部分内容结束-->
	<iframe frameborder="0" scrolling="no" src="word-map.html" id="map-show"></iframe>
<footer>
	<!-- 新老顾客统计 -->
	<div class="orginationAndStore">
        <iframe name="left1" frameborder="0" scrolling="no" src="customer.html" width="100%" height="100%"></iframe>
		<iframe  frameborder="0" scrolling="no" src="customer.1.html" width="100%" height="100%" style="position: absolute;left:0vw;top:-0vh;"></iframe>
    </div>
	<!-- 问题排行 -->
	<div class="Out-the-problem">
        <iframe frameborder="0" scrolling="no" src="question.html" height="100%" width="100%"></iframe>
    </div>
	<!-- 设备运行实时数量 -->
	<!-- <div class="Equipment"> -->
	  <iframe class="Equipment-operation-quantity" frameborder="0" scrolling="no" src="operation-quantity.html" height="100%" width="100%"></iframe>
	<!-- <div> -->
	 <!-- 档案实时数据 -->
	<div class="equipment-use">
        <iframe class="equipment-utilization" frameborder="0" scrolling="no" src="equipment.html" height="100%" width="100%"></iframe>
    </div>
	
</footer>

    <script src="../js/digital-clock-chinese.js"></script>
    <!-- <script src="js/jquery-1.9.1.min.js"></script> -->
	 <script src="../js/jquery-1.9.1.min.js"></script>
    <script>
    $(function () {
            //初始化数据
            initData();
            setInterval(initData, 10000);
        });
	// 数字背景图
	 // 全球地区分布仪器数量数据请求
	function initData() {
 	   $.ajax({
			url:"http://192.168.1.27:8080/MetisManage/dataAuth/findDeviceNum",
			type:'GET',
			success: function (res) {
				// console.log(res.records,'全球地区分布仪器数量')
				var data =res.records[0];
				splitNum(data.deviceNum, '.firstnum');
			}
		});
		
		// 今日设备在线统计数据请求
		  $.ajax({
			url:"http://192.168.1.27:8080/MetisManage/dataAuth/findDeviceTodayOnline",
			type:'GET',
			success: function (res) {
				// console.log(res.records,'今日设备在线统计')
				var data =res.records[0];
				splitNum(data.onlineNum, '.secondnum');
			}
		});
		// 今日档案统计数据请求
		 $.ajax({
			url:"http://192.168.1.27:8080/MetisManage/dataAuth/findCgTodayOnline",
			type:'GET',
			success: function (res) {
				// console.log(res.records,'今日档案统计数据请求')
				var data =res.records[0];
				splitNum(data.onlineNum, '.lastnum');
			}
		});
		function numberToString(number) {
            var str = number.toString();
            return str.split('');
			// console.log(str)
        };
        function splitNum(number, ele) {
            var numArray = numberToString(number);
            var html = '';
            for (var i = 0; i < numArray.length; i++) {
                html += '<span>' + numArray[i] + '</span>';
            };
            $(ele).html(html);
        }
		
	// 中英文版本数量
	$.ajax({
		url:'http://192.168.1.27:8080/MetisManage/dataAuth/findDeviceLanguageNum',
		type:'get',
		success:function(res){
			var data =res.records[0]
			// console.log(data)
			$('.chinese').html(data.zhLanguage)
			$('.english').html(data.enLanguage)
		}
	})
	// metis设备metis设备的数据请求
	$.ajax({
		url:'http://192.168.1.27:8080/MetisManage/dataAuth/findDeviceTypeNum',
		type:'get',
		success:function(res){
			// console.log(res)
			var data =res.records[0]
			$('.metis').html(data.metis)
			$('.moreme').html(data.moreme)
		}
	})
}
    </script>
</body>
</html>